<script>
	import {
		defineComponent,
		reactive,
		computed
	} from 'vue';
	import {
		UserOutlined,
		LockOutlined,
		SafetyOutlined
	} from '@ant-design/icons-vue';
	export default defineComponent({
		components: {
			UserOutlined,
			LockOutlined,
			SafetyOutlined
		},

		setup() {
			const formState = reactive({
				oldpwd: '',
				newpwd: '',
				surepwd: '',
				remember: true,
			});

			const onFinish = values => {
				console.log('Success:', values);
			};

			const onFinishFailed = errorInfo => {
				console.log('Failed:', errorInfo);
			};

			const disabled = computed(() => {
				return !(formState.oldpwd && formState.newpwd && formState.surepwd);
			});
			return {
				formState,
				onFinish,
				onFinishFailed,
				disabled,
			};
		},

	});
</script>

<template>
	<div class="login-box">
		<div>
			<h1 class="text-center">修改密码</h1>
			<a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
				@finishFailed="onFinishFailed">
				<a-form-item name="oldpwd" :rules="[{ required: true, message: '请输入账号!' }]">
					<a-input size="large" placeholder="请输入旧密码" v-model:value="formState.oldpwd">
						<template #prefix>
							<UserOutlined class="site-form-item-icon" />
						</template>
					</a-input>
				</a-form-item>

				<a-form-item name="newpwd" :rules="[{ required: true, message: '请输入密码!' }]">
					<a-input-password size="large"  placeholder="请输入新密码" v-model:value="formState.newpwd">
						<template #prefix>
							<LockOutlined class="site-form-item-icon" />
						</template>
					</a-input-password>
				</a-form-item>

				<a-form-item class="codeBox"  name="surepwd"
					:rules="[{ required: true, message: '请输入验证码!' }]">
					<a-input  size="large" placeholder="请确认新密码" v-model:value="formState.surepwd" style="flex:1">
						<template #prefix>
							<SafetyOutlined class="site-form-item-icon" />
						</template> 
					</a-input>
				</a-form-item>

				<a-button size="large" :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
					确认修改
				</a-button>
			</a-form>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.login-box {
		height:calc(100vh - 120px);
		display: flex;
		align-items: center;
		justify-content: center;

		h1 {
			margin-bottom: 0px !important;
			font-weight: bold;
			font-size: 1.4rem;
			letter-spacing: 5px;
		}

		
	}

	.login-form {
		width: 350px;
		border-radius: 10px;
		display: block;
		margin: 0 auto;
		padding: 40px 20px;
	}

	.login-form-button {
		width: 100%;
	}
</style>
